<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    html, body {
        height: 100%;
    }

    body {
        margin: 0;
    }

    .loginBackground {
        height: 100%;
        background-color: beige;
        min-height: 800px;
        min-width: 630px;
    }

    .loginBox {
        width: 450px;
        position: absolute;
        top: 40%;
        left: 50%;
        border: 1px solid #dadada;
        border-radius: 10px;
        background: linear-gradient(#fff, #f5f5f5);
        margin: -163px 0 0 -218px;
        box-shadow: 0 9px 30px -6px rgba(0, 0, 0, .2),
        0 18px 20px -10px rgba(0, 0, 0, .04),
        0 18px 20px -10px rgba(0, 0, 0, .04),
        0 10px 20px -10px rgba(0, 0, 0, .04);
    }

    .logo {
        border-radius: 10px;
        margin: 0 0 50px;
        height: 150px;
        position: relative;
        background-color: #dadada;
    }

    .logo_title {
        position: absolute;
        bottom: 0;
        width: 100%;
        color: #333;
        font-weight: 400;
        text-align: center;
    }

    .input_block {
        height: auto;
        padding: 0 40px 22px;
    }

    .inputGroup {
        margin-bottom: 15px;
        border-radius: 10px;
    }

    /*
            border: 2px;
    border-color: #6b93f2;
    border-style: solid none solid solid;
    */
    .inputGroup:hover {

    }

    .icon {
        height: 47.3px;
        width: 45px;
        float: left;
        background-color: #98a9d4;
        border-radius: 7px 0 0 7px;
    }

    .input_block input {
        width: 292px;
        height: 21px;
        padding: 12px 12px 12px 14px;
        border-radius: 0 7px 7px 0;
        border: #ccc solid 1px;
    }

    .focus {
        border: 2px solid #6b93f2 !important;
    }

    #loginBtn {
        cursor: pointer;
        width: 100%;
        height: 46px;
        margin: 8px 0 0;
        border: 1px solid #6f97e5;
        border-radius: 10px;
        background: #6f97e5;
    }

    input:focus {
        outline: none;
    }

    .userRegister {
        cursor: pointer;
        float: right;
        margin-top: -3px;
        border: 1px solid #dadada;
        padding: 5px;
        border-radius: 5px;
    }

    .userRegister:hover {
        background-color: #98a9d4;
    }

    /************模态框*************/
    .x_modal_background {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
    }

    .x_modal {
        margin: 50px auto;
        width: 380px;
        background-color: #f3f3f3;
        border-radius: 10px;
        min-width: 200px;
    }

    .x_modal_close {
        cursor: pointer;
        font-size: 33px;
        text-align: center;
        width: 30px;
        height: 30px;
        margin: 4px;
        float: right;
    }

    .x_modal_head {
        height: 150px;
        border-bottom: 1px solid #dadada;
    }

    .x_modal_body {
        height: 400px;
    }

    .x_modal_foot {
        height: 45px;
        border-top: 1px solid #dadada;
    }

    .info_table {
        position: relative;
        padding: 10% 0;
        margin: 0 13%;
    }

    .info_table > div {
        margin: 3% 0 8% 15%;
    }

    .info_table input {
        height: 30px;
        border: 0;
        background-color: #f3f3f3;
        border-bottom: 1px solid #dadada;
    }

    .info_table span {
        float: left;
        margin: 4px 10px;
    }

    .info_table textarea {
        width: 162px;
        height: 109px;
        margin-top: 4px;
        border: 0;
        background-color: #f3f3f3;
    }

    .female {
        display: inline-block;
        width: 23px;
        margin-left: 14px;
        height: 23px;
        background-color: aquamarine;
        background: url(../../image/female.png) no-repeat 0 1px;
        background-size: 19px;
    }

    .male {
        display: inline-block;
        width: 23px;
        margin-left: 14px;
        height: 23px;
        background-color: aquamarine;
        background: url(../../image/male.png) no-repeat 0 1px;
        background-size: 19px;
    }

    #confirm input {
        margin-left: 70px;
    }

    .ok_Btn {
        cursor: pointer;
        float: right;
        width: 100px;
        height: 100%;
        border: 0;
        border-radius: 10px 0 10px 10px;
    }

    .warning_psw:after {
        content: "密码不一致";
        height: 21px;
        float: right;
        right: 0;
        color: wheat;
        padding: 5px;
        position: absolute;
        border-radius: 10px;
        background-color: #ce0e0e;
    }

    .warning_content:after {
        content: "不能为空";
        height: 21px;
        float: right;
        right: 0;
        color: wheat;
        padding: 5px;
        position: absolute;
        border-radius: 10px;
        background-color: #ce0e0e;
    }
</style>
<body>
<div class="loginBackground">
    <div class="loginBox">
        <div class="logo">
            <h4 class="logo_title">使用我聊账号登录</h4>
        </div>
        <div class="input_block">
            <div class="inputGroup">
                <span class="icon"></span>
                <input class="input" id="userAccount" placeholder="账号">
            </div>
            <div class="inputGroup">
                <span class="icon"></span>
                <input type="password" class="pswInput" id="userPassword" placeholder="密码">
            </div>
            <div>
                <spacn class="userRegister">注册</spacn>
                <button type="button" id="loginBtn">登录</button>
            </div>
        </div>
    </div>
</div>

<div class="x_modal_background" id="userInfoModal">
    <div class="x_modal">
        <div class="x_modal_head">
            <span class="x_modal_close">&times;</span>
        </div>
        <div class="x_modal_body">
            <form id="userInfo">
                <div class="info_table">
                    <input type="hidden" name="userIcon" value="100,100,100">
                    <div>
                        <span>账号：</span>
                        <input id="info_UserAccount" name="userAccount" placeholder="5-12位数字">
                    </div>
                    <div>
                        <span>密码：</span>
                        <input type="password" id="info_UserPassword" placeholder="5-12位数字，字母">
                    </div>
                    <div id="confirm" style="display: none">
                        <input type="password" id="info_UserPassword2" name="userPassword" placeholder="确认密码">
                    </div>
                    <div>
                        <span>昵称：</span>
                        <input id="info_UserNickName" name="userNickname" placeholder="12以内的数字,字母,_">
                    </div>
                    <div>
                        <span>性别：</span>
                        <div id="userSex">
                            <form>
                                <label><i class="male"></i><input name="userSex" value="0" type="radio" checked></label>
                                <label><i class="female"></i><input name="userSex" value="1" type="radio"></label>
                            </form>
                        </div>
                    </div>
                    <div>
                        <span>年龄：</span>
                        <input id="info_UserAge" name="userAge">
                    </div>
                </div>
            </form>
        </div>
        <div class="x_modal_foot">
            <button class="ok_Btn">确定</button>
        </div>
    </div>
</div>
</body>
<script src="plugins/jquery/jquery-3.2.1.min.js"></script>
<script src="login.js"></script>
</html>